<template lang="pug">
#app
  preview-modal
  preview-carousel
  app-sidebar(v-if="$route.meta.sidebar === 'show'")
  .app-container(:style="$route.meta.appHeader === 'show' ? { 'width': 'calc(100% - 208px)' } : { 'width': '100%' }")
    app-header(v-if="$route.meta.appHeader === 'show'")
    .view-container(:style="$route.meta.appHeader === 'show' ? { 'marginTop': '50px', 'height': 'calc(100% - 50px)' } : { 'height' : '100%' }")
      .view(ref="appView")
        view-header(v-if="$route.name !== 'index' && $route.meta.appHeader === 'show'")
        keep-alive(exclude="login,findManage,account,brandManage,materials,survey")
          router-view
</template>
<script>
import appSidebar from '@/components/appSidebar.vue'
import appHeader from '@/components/appHeader.vue'
import previewModal from '@/components/modal/previewModal.vue'
import previewCarousel from '@/components/modal/previewCarousel.vue'
import viewHeader from '@/components/viewHeader.vue'
export default {
  name: 'app',
  components: {
    appSidebar,
    appHeader,
    previewModal,
    previewCarousel,
    viewHeader
  }
}
</script>
<style lang="scss">
#app {
  height: 100%;
  display: flex;
  font-size: 14px;
}
.app-container {
  height: 100%;
  background: #F8F8F8;
}
.view-container {
  display: flex;
  width: 100%;
  &.full-screen {
    margin-top: 0;
    height: 100%;
    .view {
      padding: 0;
    }
  }
}
.view {
  height: 100%;
  width: 100%;
  overflow: auto;
  background: #EFF2F9;
}
</style>
